<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 在线聊天室</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/materialdesignicons.min.css"/>
    <link rel="stylesheet" href="css/login.css"/>
</head>
<body>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="login-card p-4 p-md-5 mx-auto">
                <h2 class="login-header text-center mb-4">登&nbsp;&nbsp;陆</h2>
                <form id="loginForm" method="post" action="/login">
                    <!-- 用户名输入 -->
                    <div class="mb-4">
                        <div class="input-group position-relative">
                            <i class="mdi mdi-account input-icon"></i>
                            <input type="text" name="username" class="form-control py-2"
                                   placeholder="用户名" required
                                   minlength="3" maxlength="20">
                        </div>
                    </div>

                    <!-- 密码输入 -->
                    <div class="mb-3">
                        <div class="input-group position-relative">
                            <i class="mdi mdi-lock input-icon"></i>
                            <input type="password" name="password" id="password"
                                   class="form-control py-2" placeholder="密码" required
                                   minlength="6">
                            <span class="show-password" toggle="#password">
                                <i class="mdi mdi-eye"></i>
                            </span>
                        </div>
                    </div>

                    <!-- 错误信息 -->
                    <div class="error-message text-danger mb-3" id="errorMessage">
                        &nbsp;
                    </div>

                    <!-- 登录按钮 -->
                    <button type="submit" class="btn btn-login btn-primary w-100 py-2 mb-3" id="loginBtn">
                        登 陆
                    </button>

                    <!-- 注册链接 -->
                    <div class="text-center">
                        <small class="text-muted">没有账号？<a href="register.html" th:href="@{/register}" class="text-decoration-none">立即注册</a></small>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script>
    $(document).ready(function() {
        // 密码显示/隐藏切换
        $('.show-password').click(function() {
            const target = $($(this).attr('toggle'));
            const icon = $(this).find('i');

            if (target.attr('type') === 'password') {
                target.attr('type', 'text');
                icon.removeClass('mdi-eye').addClass('mdi-eye-off');
            } else {
                target.attr('type', 'password');
                icon.removeClass('mdi-eye-off').addClass('mdi-eye');
            }
        });

        // 表单提交
        $('#loginForm').submit(function(e) {
            e.preventDefault();
            const btn = $('#loginBtn');
            const errorMsg = $('#errorMessage');

            // 验证表单
            const username = $('input[name="username"]').val().trim();
            const password = $('input[name="password"]').val().trim();

            if (!username) {
                showError('用户名不能为空！');
                return;
            }

            if (!password) {
                showError('密码不能为空！');
                return;
            }

            // 设置加载状态
            btn.prop('disabled', true);
            btn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 登录中...');

            // 发送请求
            $.ajax({
                url: '/auth/login',
                type: 'POST',
                data: $(this).serialize(),
                success: function(res) {
                    if (res.code === 200) {
                        window.location.href = 'chat';
                    } else {
                        showError(res.message || '登录失败，请重试');
                    }
                },
                error: function(xhr) {
                    showError('网络错误: ' + xhr.statusText);
                },
                complete: function() {
                    btn.prop('disabled', false);
                    btn.text('登 陆');
                }
            });

            function showError(message) {
                errorMsg.text(message).addClass('show');
                setTimeout(() => {
                    errorMsg.removeClass('show');
                }, 5000);
            }
        });

        // 输入时隐藏错误信息
        $('input').on('input', function() {
            $('#errorMessage').removeClass('show');
        });
    });
</script>
</body>
</html>
